<template>
    <div class="box">
        <!-- 头部 -->
      <div class="header">
        <div class="text">外卖</div>
        <div class="location">
          <van-icon name="location" />
          <span>南职C-201</span>
          <van-icon name="arrow" />
        </div>
      </div>

      <div class="cartDetails">
        <div v-for="c in cart_list"class="card_detail">
            <CartItem :item="c"></CartItem>
        </div>
      </div>

      <div class="result">
        <input type="checkbox" v-model="toggleAll" />全选
        <div class="total"> 总价：{{ totalPrice }}元</div>
        <button>生成订单</button>
      </div>

    </div>

    <Footer></Footer>
</template>

<script setup >
import { reactive, toRefs ,computed } from 'vue';
import CartItem from '@/views/cart/CartItem.vue'
import Order from '../order/Order.vue';


const data = reactive({
    cart_list:[
        {title:'爆炒鲨鱼',pic:'',price:888,count:1,checked:false},
        {title:'可乐',pic:'',price:98,count:1,checked:true},
        {title:'蛋炒饭',pic:'',price:688,count:1,checked:false},
    ]
})

const {cart_list} = {...toRefs(data)}




const totalQuantity = computed(()=>{
  return data.cart_list.filter(item=>item.checked).reduce((sum,item)=>{
    return sum + item.count;
  },0)
})


订单
function createOrder(){
  const brder = {OrderId:Date.now(),price:totalPrice,count:totalQuantity}
}




//总价
const totalPrice = computed(()=>{
  return data.cart_list.filter(item=>item.checked).reduce((sum,item)=>{
    return sum + item.price * item.count;
  },0)
})





//未选的数量
const count = computed(()=>data.cart_list.filter(item=>!item.checked).length)





//全选
const toggleAll = computed({
  get(){
    return count.value === 0;
  },
  set(state){
    data.cart_list.forEach(item=>{
      item.checked = state;
    })
  }
})





</script>

<style lang="less">
.result{
  display: flex;
  justify-content: space-between;
  padding: 10px;
} 
.cartDetails{
  margin-top: 10px;
}
 .header {
    background-image: linear-gradient(#ffc400, #fff);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 5px 40px 5px;
    .text {
      font-size: 12px;
      font-weight: 600;
    }
    .location {
      span {
        margin: 0 5px;
      }
      font-size: 12px;
    }
  }
</style>